/* 人工组卷 */
import React, { PureComponent } from 'react';
import { Form, Button, Input, Radio, InputNumber, Row, Col, message, Card } from 'antd';
import { HardLevelSelect, ExamSubjectTreeSelect, RelatedPersonnelextendsTransfer, PaperTemplate } from '../Components/AntComponents'
import { editPaperManual, getTemplateDetail, getManualPaperDetail } from '@/services/paperInfo'
import { getQuestionList } from '@/services/questionsBank'
import SelectQuestionModal from './SelectQuestionModal'
import { PageContainer } from '@ant-design/pro-layout';
import { isLianxi } from '@/utils/utils'
const layout = {
    labelCol: { span: 2 },
    wrapperCol: { span: 15 },
};
const tailLayout = {
    wrapperCol: { offset: 1 },
};
export default class Index extends PureComponent<any, any> {
    constructor(props: any) {
        super(props)
        this.state = {
            name: '',
            subject: [],
            template: null,
            complexity: '0',
            total: 0,
            test_type: '1',
            multiple: 0,
            multiple_num: 0,
            multiple_deduct: 0,
            multiple_mistake: 0,
            choices: 0,
            choices_num: 0,
            choices_deduct: 0,
            choices_mistake: 0,
            judge: 0,
            judge_num: 0,
            judge_deduct: 0,
            judge_mistake: 0,
            test_time: 0,
            badStart: 0,
            badEnd: 0,
            sosoStart: 0,
            sosoEnd: 0,
            goodStart: 0,
            goodEnd: 0,
            wonderfulStart: 0,
            wonderfulEnd: 0,
            people: [],
            loading: false,
            multipleNum: -1, choicesNum: -1, judgeNum: -1,
            singleModal: false,
            batchModal: false,
            judgeModal: false,
            searchContent: '', searchSubject: '', searchComplexity: '',//搜索用
            questionListData: [],
            questionListCount: [],
            questionListPage: 1,
            selectedRowKeys: [],
            selectedSingle: [],
            selectedBatch: [],
            selectedJudge: [],
            questionLoading: true,
            pageSize: 100
        }
    }
    changeWithTargetValue = (e: any, name: any) => {
        this.setState({
            [name]: e.target.value
        })
    }
    changeValue = (e: any, name: any) => {
        this.setState({
            [name]: e
        })
    }

    changeSubject = (e: any) => {
        this.setState({
            subject: e
        })
    }
    changeTemplate = (e: any) => {
        this.setState({
            template: e
        })
        getTemplateDetail({ id: e }).then(res => {
            const {
                complexity,
                total,
                test_type,
                multiple_num,
                multiple_score,
                multiple_deduct,
                multiple_mistake,
                choices_num,
                choices_score,
                choices_deduct,
                choices_mistake,
                judge_num,
                judge_score,
                judge_deduct,
                judge_mistake,
                test_time, excellent, fail,
                good, pass } = res;
            const badData = fail ? fail.split(',') : [];
            const sosoData = pass ? pass.split(',') : [];
            const goodData = good ? good.split(',') : '';
            const wonderfulData = excellent ? excellent.split(',') : '';
            this.setState({
                complexity: complexity + '', total, test_type: test_type + '',
                multiple: multiple_num, multiple_num: multiple_score, multiple_deduct, multiple_mistake,
                choices: choices_num, choices_num: choices_score, choices_deduct, choices_mistake,
                judge: judge_num, judge_num: judge_score, judge_deduct, judge_mistake,
                test_time, badStart: badData[0], badEnd: badData[1], sosoStart: sosoData[0], sosoEnd: sosoData[1],
                goodStart: goodData[0], goodEnd: goodData[1], wonderfulStart: wonderfulData[0], wonderfulEnd: wonderfulData[1],

            })
        })
    }
    changeHardLevel = (e: any) => {
        this.setState({
            complexity: e
        })
    }
    changePeople = (e: any) => {
        this.setState({
            people: e
        })
    }
    changeRuleValue = (e: any, d: any, name: any) => {
        this.setState({
            [name]: e,
            [name + 'Label']: d.children
        })
    }
    submitHandle = () => {
        const {
            name, subject, template, complexity, total, test_type, multiple, multiple_num, multiple_deduct, multiple_mistake,
            choices, choices_num, choices_deduct, choices_mistake, judge, judge_num, judge_deduct, judge_mistake, test_time, badStart,
            badEnd, sosoStart, sosoEnd, goodStart, goodEnd, wonderfulStart, wonderfulEnd, people, selectedSingle, selectedBatch, selectedJudge,
        } = this.state;
        const id = this.props.match.params.id;
        if (selectedSingle.length !== Number(multiple)) {
            return message.error('单选题选择数量和试题分布不一致')
        }
        if (!isLianxi()&&selectedBatch.length !== Number(choices)) {
            return message.error('多选题选择数量和试题分布不一致')
        }
        if (selectedJudge.length !== Number(judge)) {
            return message.error('判断题选择数量和试题分布不一致')
        }
        const countScore = multiple * multiple_num + choices * choices_num + judge * judge_num;
        if (countScore > total) return message.error('试题分数已超出试卷总分')
        if (!name || !subject || !total || !test_type || !multiple || !choices || !judge || !test_time ) return message.error('请完善试卷信息')

        this.setState({
            loading: true
        })
        const stringfy = (arr: any) => {
            return JSON.stringify(arr).replace('[', '').replace(']', '')
        }
        editPaperManual({
            id, name, subject: stringfy(subject), template, complexity, total, test_type, multiple_num: multiple, multiple_score: multiple_num, multiple_deduct, multiple_mistake,
            choices_deduct, choices_mistake, choices_num: choices, choices_score: choices_num, judge_deduct, judge_mistake,
            judge_num: judge, judge_score: judge_num, test_time, fail: badStart + ',' + badEnd, pass: sosoStart + ',' + sosoEnd, good: goodStart + ',' + goodEnd,
            excellent: wonderfulStart + ',' + wonderfulEnd, people: stringfy(people), choice: stringfy(selectedSingle), choices: stringfy(selectedBatch), judge: stringfy(selectedJudge)
        }).then(res => {
            this.setState({
                loading: false
            })
            if (res.status === 1) {
                message.success('提交成功')
                history.back()
            } else {
                message.error('提交失败')
            }
        })
    }
    getQuestionList = (page: string, type: any, size) => {
        const { searchContent, subject, searchComplexity } = this.state;
        getQuestionList({ page, types: '3', type, content: searchContent, subject: subject, complexity: searchComplexity, num: size }).then(res => {
            this.setState({
                questionListCount: res.count,
                questionListData: res.data,
                questionLoading: false
            })
        })

    }
    showSelectQuestionModal = (name: any) => () => {
        const type = () => {
            if (name === 'singleModal') return '1';
            if (name === 'batchModal') return '2';
            if (name === 'judgeModal') return '3';
        }
        const type2 = () => {
            if (name === 'singleModal') return 'selectedSingle';
            if (name === 'batchModal') return 'selectedBatch';
            if (name === 'judgeModal') return 'selectedJudge';
        }
        this.setState({
            questionLoading: true,
            selectedRowKeys: this.state[type2()],
            [name]: true

        })
        const { pageSize } = this.state;
        this.getQuestionList('1', type(), pageSize)
    }
    hideSelectQuestionModal = (name: any) => {
        this.setState({
            [name]: false,
            questionListPage: 1,
            selectedRowKeys: []
        })
    }
    changeQuestionListPage = (e: any, type: any, pageSize) => {
        this.setState({
            questionListPage: e,
            questionLoading: true,
            pageSize
        })
        this.getQuestionList(e, type, pageSize)
    }
    changeSelectedRowKeys = (selectedRowKeys: any) => {
        this.setState({
            selectedRowKeys
        })
    }
    rowSelect = (e: any) => {
        let { selectedRowKeys } = this.state;
        const index = selectedRowKeys.indexOf(e.id);
        if (index !== -1) {
            selectedRowKeys.splice(index, 1)
            this.setState({
                selectedRowKeys: [...selectedRowKeys]
            })
            return
        }
        this.setState({
            selectedRowKeys: [...selectedRowKeys, e.id]
        })
    }
    confirmSelected = (name: any) => {
        const type = () => {
            if (name === 'singleModal') return 'selectedSingle';
            if (name === 'batchModal') return 'selectedBatch';
            if (name === 'judgeModal') return 'selectedJudge';
        }
        const { selectedRowKeys } = this.state
        this.setState({
            [type()]: selectedRowKeys,
            selectedRowKeys: [],
            [name]: false,
            questionListPage: 1
        })
    }
    goBack = () => {
        history.back()
    }
    componentDidMount() {
        const id = this.props.match.params.id;
        getManualPaperDetail({ id }).then(res => {
            const {
                choices_deduct, choices_mistake, choices_num, choices_score, complexity, excellent, fail,
                good, judge_deduct, judge_mistake, judge_num, judge_score, multiple_deduct,
                multiple_mistake, multiple_num, multiple_score, name, pass, people,
                selection_rules, subject, template, test_time, test_type, total, choice, choices, judge
            } = res;
            const badData = fail?fail.split(','):[];
            const sosoData = pass?pass.split(','):[];
            const goodData = good?good.split(','):'';
            const wonderfulData = excellent?excellent.split(','):'';
            const subjectData = subject.split(',').map(Number)
            this.setState({
                multiple: multiple_num, multiple_num: multiple_score, multiple_deduct, multiple_mistake,
                judge: judge_num, judge_num: judge_score, judge_deduct, judge_mistake,
                choices: choices_num, choices_num: choices_score, choices_deduct, choices_mistake,
                complexity: complexity + '', badStart: badData[0], badEnd: badData[1], sosoStart: sosoData[0], sosoEnd: sosoData[1],
                goodStart: goodData[0], goodEnd: goodData[1], wonderfulStart: wonderfulData[0], wonderfulEnd: wonderfulData[1],
                name, template, people: people ? people.split(',').map(Number) : [], subject: subjectData, test_time, test_type: test_type + '', total,
                selection_rules: selection_rules + '', selectedSingle: choice.split(',').map(Number), selectedBatch: choices.split(',').map(Number), selectedJudge: judge.split(',').map(Number)
            })
        })
    }

    render() {
        const { test_type, people, total, template, pageSize,
            complexity, subject, singleModal, batchModal, judgeModal, questionListData, questionListCount, questionListPage,
            multiple, multiple_num, multiple_deduct, multiple_mistake,
            choices, choices_num, choices_deduct, choices_mistake,
            judge, judge_num, judge_deduct, judge_mistake, test_time, loading, selectedRowKeys, questionLoading,
            selectedBatch, selectedSingle, selectedJudge, badEnd, badStart, sosoEnd, sosoStart, goodEnd, goodStart, wonderfulEnd, wonderfulStart, name
        } = this.state;
        const selectQuestionList = [
            {
                label: '选择单选题',
                value: singleModal,
                type: 'singleModal',
                textareaValue: selectedSingle
            },
            {
                label: '选择多选题',
                value: batchModal,
                type: 'batchModal',
                textareaValue: selectedBatch
            },
            {
                label: '选择判断题',
                value: judgeModal,
                type: 'judgeModal',
                textareaValue: selectedJudge
            }
        ]
        if(isLianxi()){
            selectQuestionList.splice(1,1)
        }
        return (
            <PageContainer title="编辑人工组卷">
                <Card>
                    <Form>
                        <Form.Item {...layout} label="考试名称">
                            <Input style={{ width: 200 }} placeholder="请输入考试名称" value={name} onChange={(e) => this.changeWithTargetValue(e, 'name')}></Input>
                        </Form.Item>
                        <Form.Item {...layout} label="考试科目">
                            <ExamSubjectTreeSelect onChange={this.changeSubject} value={subject} />
                        </Form.Item>
                        <Form.Item {...layout} label="试卷模板">
                            <PaperTemplate onChange={this.changeTemplate} value={template} />
                        </Form.Item>
                        <Form.Item {...layout} label="难易程度">
                            <HardLevelSelect onChange={this.changeHardLevel} value={complexity} />
                        </Form.Item>
                        <Form.Item {...layout} label="试卷总分">
                            <InputNumber placeholder="请输入试卷总分" style={{ width: 200 }} value={total} onChange={(e) => this.changeValue(e, 'total')} />
                        </Form.Item>
                        <Form.Item {...layout} label="试卷类别">
                            <Radio.Group onChange={(e) => this.changeWithTargetValue(e, 'test_type')} value={test_type}>
                                <Radio value="2">模拟考试试卷</Radio>
                                <Radio value="1">正式考试试卷</Radio>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item {...layout} label="试题分布">
                            <Row>
                                <Col style={{ marginBottom: 10 }} span={6}>单选题 <InputNumber value={multiple} onChange={(e) => this.changeValue(e, 'multiple')} /> 道</Col>
                                <Col style={{ marginBottom: 10 }} span={6}>每题 <InputNumber value={multiple_num} onChange={(e) => this.changeValue(e, 'multiple_num')} /> 分&nbsp;&nbsp;(共<b>{multiple * multiple_num}</b>分 )</Col>
                                <Col style={{ marginBottom: 10 }} span={6}>未答扣 <InputNumber value={multiple_deduct} onChange={(e) => this.changeValue(e, 'multiple_deduct')} /> 分</Col>
                                <Col style={{ marginBottom: 10 }} span={6}>答错扣 <InputNumber value={multiple_mistake} onChange={(e) => this.changeValue(e, 'multiple_mistake')} /> 分</Col>
                            </Row>
                            {
                                !isLianxi()&&    <Row>
                                <Col style={{ marginBottom: 10 }} span={6}>多选题 <InputNumber value={choices} onChange={(e) => this.changeValue(e, 'choices')} /> 道</Col>
                                <Col style={{ marginBottom: 10 }} span={6}>每题 <InputNumber value={choices_num} onChange={(e) => this.changeValue(e, 'choices_num')} /> 分&nbsp;&nbsp;(共<b>{choices * choices_num}</b>分 )</Col>
                                <Col style={{ marginBottom: 10 }} span={6}>未答扣 <InputNumber value={choices_deduct} onChange={(e) => this.changeValue(e, 'choices_deduct')} /> 分</Col>
                                <Col style={{ marginBottom: 10 }} span={6}>答错扣 <InputNumber value={choices_mistake} onChange={(e) => this.changeValue(e, 'choices_mistake')} /> 分</Col>
                            </Row>
                            }
                        
                            <Row>
                                <Col style={{ marginBottom: 10 }} span={6}>判断题 <InputNumber value={judge} onChange={(e) => this.changeValue(e, 'judge')} /> 道</Col>
                                <Col style={{ marginBottom: 10 }} span={6}>每题 <InputNumber value={judge_num} onChange={(e) => this.changeValue(e, 'judge_num')} /> 分&nbsp;&nbsp;(共<b>{judge * judge_num}</b>分 )</Col>
                                <Col style={{ marginBottom: 10 }} span={6}>未答扣 <InputNumber value={judge_deduct} onChange={(e) => this.changeValue(e, 'judge_deduct')} /> 分</Col>
                                <Col style={{ marginBottom: 10 }} span={6}>答错扣 <InputNumber value={judge_mistake} onChange={(e) => this.changeValue(e, 'judge_mistake')} /> 分</Col>
                            </Row>
                        </Form.Item>
                        <Form.Item {...layout} label="考试时长">
                            <InputNumber onChange={(e) => this.changeValue(e, 'test_time')} value={test_time} style={{ width: 200 }} /> 分钟
                    </Form.Item>
                        <Form.Item {...layout} label="分值标准">
                            <Row>
                                <Col span={24} style={{ marginBottom: 10 }}><div style={{ width: 50, float: 'left' }}>不及格</div> <InputNumber value={badStart} onChange={(e) => this.changeValue(e, 'badStart')} /> —— <InputNumber value={badEnd} onChange={(e) => this.changeValue(e, 'badEnd')} /> </Col>
                                <Col span={24} style={{ marginBottom: 10 }}><div style={{ width: 50, float: 'left' }}>及格</div>  <InputNumber value={sosoStart} onChange={(e) => this.changeValue(e, 'sosoStart')} /> —— <InputNumber value={sosoEnd} onChange={(e) => this.changeValue(e, 'sosoEnd')} /></Col>
                                <Col span={24} style={{ marginBottom: 10 }}><div style={{ width: 50, float: 'left' }}>良好</div>  <InputNumber value={goodStart} onChange={(e) => this.changeValue(e, 'goodStart')} /> —— <InputNumber value={goodEnd} onChange={(e) => this.changeValue(e, 'goodEnd')} /></Col>
                                <Col span={24} style={{ marginBottom: 10 }}><div style={{ width: 50, float: 'left' }}>优秀</div>  <InputNumber value={wonderfulStart} onChange={(e) => this.changeValue(e, 'wonderfulStart')} /> —— <InputNumber value={wonderfulEnd} onChange={(e) => this.changeValue(e, 'wonderfulEnd')} /></Col>
                            </Row>
                        </Form.Item>

                        {
                            selectQuestionList.map(item => {
                                return <Form.Item {...layout} key={item.type} label={item.label}>
                                    <SelectQuestionModal
                                        hideSelectQuestionModal={this.hideSelectQuestionModal}
                                        visible={item.value}
                                        type={item.type}
                                        questionListData={questionListData}
                                        questionListPage={questionListPage}
                                        questionListCount={questionListCount}
                                        changeQuestionListPage={this.changeQuestionListPage}
                                        selectedRowKeys={selectedRowKeys}
                                        changeSelectedRowKeys={this.changeSelectedRowKeys}
                                        rowSelect={this.rowSelect}
                                        questionLoading={questionLoading}
                                        confirmSelected={this.confirmSelected}
                                        pageSize={pageSize}
                                    />
                                    <Input.TextArea
                                        readOnly
                                        value={item.textareaValue}
                                        onClick={this.showSelectQuestionModal(item.type)}
                                        placeholder={'请' + item.label}
                                        style={{ width: 540, resize: 'none', height: 100 }}
                                    />
                                </Form.Item>
                            })
                        }
                        <Form.Item {...layout} label="选择补录人员">
                            <RelatedPersonnelextendsTransfer onChange={this.changePeople} value={people} />
                        </Form.Item>
                        <Form.Item {...tailLayout}>
                            <Button type="primary" onClick={this.submitHandle} loading={loading}>提交</Button>
                            <Button onClick={this.goBack} style={{ marginLeft: 20 }}>返回</Button>

                        </Form.Item>
                    </Form>
                </Card>
            </PageContainer>
        )
    }
}
